<template>
  <div>
    <avue-form ref="form" :option="option" v-model="form">
      <!--      <template slot-scope="{ disabled, size }" slot="hasWhere">-->
      <!--        <el-switch :disabled="disabled" size="small" v-model="form.hasWhere" @change="handleChangeSwitch"></el-switch>-->
      <!--      </template>-->
    </avue-form>
    <common-modal-template ref="commonModalTemplate" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
  </div>
</template>

<script>
import commonModalTemplate from '@/components/common-modal-template/common-modal-template';
export default {
  name: 'dataSourceForm',
  components: {
    commonModalTemplate
  },
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    dataSource: {
      type: String,
      default: ''
    },
    isViewStatus: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.form = this._cloneDeep(this.formData);
      }
    },
    dataSource: {
      handler(val) {
        if (val) this.$set(this.form, 'datasourceName', val);
      },
      immediate: true,
      deep: true
    },
    isViewStatus(val) {
      const column = this._cloneDeep(this.option.column);
      column.forEach((item) => {
        item.disabled = val;
      });
      this.$set(this.option, 'column', column);
    }
  },
  data() {
    return {
      form: Object.assign({ datasourceName: '', hasWhere: false }, this._cloneDeep(this.formData)),
      tableOption: {},
      timer: new Date().getTime(),
      option: {
        menuPosition: 'right',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '数据源',
            prop: 'datasourceName',
            type: 'search',
            span: 15,
            disabled: true,
            labelWidth: 150,
            rules: [
              {
                required: true,
                message: '请选择数据源',
                trigger: 'blur'
              }
            ],
            appendClick: () => {
              this.openCommonModal();
            }
          },
          // {
          //   label: '是否存在where条件',
          //   span: 11,
          //   offset: 2,
          //   labelWidth: 150,
          //   prop: 'hasWhere',
          //   type: 'switch',
          //   formslot: true,
          //   value: true,
          //   disabled: this.isViewStatus
          // },
          {
            label: '',
            prop: 'query',
            type: 'textarea',
            placeholder: '请输入数据源',
            rows: 6,
            span: 24,
            disabled: this.isViewStatus,
            change: ({ column, value }) => {
              this.form[column.prop] = value;
              this.$emit('dataSourceChange', this.form);
            },
            rules: [
              {
                required: true,
                message: '请输入数据源',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '',
            prop: 'appendCondition',
            placeholder: '请输入追加条件',
            type: 'textarea',
            span: 24,
            minRows: 2,
            maxRows: 3,
            disabled: this.isViewStatus,
            change: ({ column, value }) => {
              this.form[column.prop] = value;
              this.$emit('dataSourceChange', this.form);
            }
          },
          {
            label: '',
            prop: 'orderSql',
            placeholder: '请输入排序sql',
            type: 'textarea',
            span: 24,
            minRows: 2,
            maxRows: 3,
            disabled: this.isViewStatus,
            change: ({ column, value }) => {
              this.form[column.prop] = value;
              this.$emit('dataSourceChange', this.form);
            }
          }
          // {
          //   label: '',
          //   prop: 'pagingsql',
          //   type: 'textarea',
          //   placeholder: '请输入分页sql',
          //   span: 24,
          //   minRows: 2,
          //   maxRows: 3,
          //   disabled: this.isViewStatus,
          //   change: ({ column, value }) => {
          //     this.form[column.prop] = value;
          //     this.$emit('dataSourceChange', this.form);
          //   }
          // }
        ]
      }
    };
  },
  methods: {
    newKey() {
      this.timer = new Date().getTime();
    },
    getSelectedRows(rowData) {
      const datasourceName = this._get(rowData, 'name', '');
      const datasourceId = this._get(rowData, 'id', '');
      this.form.datasourceName = datasourceName;
      this.$emit('dataBaseChange', { datasourceName, datasourceId });
    },
    handleChangeSwitch() {
      this.$emit('dataSourceChange', this.form);
    },
    openCommonModal() {
      this.modalName = 'dataSource';
      this.$refs.commonModalTemplate.showModal();
      this.tableOption = {
        modalTitle: '选择数据源（双击进行选择）',
        url: '/api/blade-system/datasource/list',
        isPage: true,
        rowSelectionType: 'single',
        columnDefs: [
          {
            label: '名称',
            prop: 'name'
          },
          {
            label: '驱动类',
            prop: 'driverClass'
          },
          {
            label: '用户名',
            prop: 'username'
          },
          {
            label: '密码',
            prop: 'password',
            hide: true
          },
          {
            label: '连接地址',
            prop: 'url'
          },
          {
            label: '备注',
            prop: 'remark'
          }
        ]
      };
    },
    formValidate() {
      this.$refs.form.validate();
    }
  }
};
</script>

<style scoped></style>
